<template>
  <div ref="chartContainer" class="chart-container"></div>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue';
import * as echarts from 'echarts';

const props = defineProps({
  data: {
    type: Array,
    default: () => [
      { value: 16, name: '1' },
      { value: 18, name: '2' },
      { value: 18, name: '3' },
      { value: 16, name: '4' }
    ]
  }
});

const chartContainer = ref(null);
let chart = null;

// 初始化图表
const initChart = () => {
  if (!chartContainer.value) return;
  
  // 创建图表实例
  chart = echarts.init(chartContainer.value);
  
  // 配置图表选项
  const option = {
    grid: {
      top: 10,
      right: 0,
      bottom: 0,
      left: 0,
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: props.data.map(item => {
        // return item.name.replace('unsatisified_num=', 'un=');
        return item.name;
      }),
      axisLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.3)'
        }
      },
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 10,
        rotate: 45,
        interval: 0,
        align: 'right',
        padding: [0, 0, 0, 0]
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        show: true,
        lineStyle: {
          color: 'rgba(255,255,255,0.3)'
        }
      },
      splitLine: {
        lineStyle: {
          color: 'rgba(255,255,255,0.1)',
          type: 'dashed'
        }
      },
      axisLabel: {
        color: 'rgba(255,255,255,0.7)',
        fontSize: 10
      }
    },
    series: [
      {
        data: props.data.map(item => item.value),
        type: 'bar',
        barWidth: '40%',
        itemStyle: {
          color: function(params) {
            // 找出最大值
            const maxValue = Math.max(...props.data.map(item => item.value));
            // 如果是最大值，使用橙色渐变
            if (params.value === maxValue) {
              return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                { offset: 0, color: '#FFAA00' },
                { offset: 1, color: 'rgba(255,170,0,0)' }
              ]);
            }
            // 其他柱子使用原来的青色渐变
            return new echarts.graphic.LinearGradient(0, 0, 0, 1, [
              { offset: 0, color: '#56FCF8' },
              { offset: 1, color: '#152E2D' }
            ]);
          }
        }
      }
    ]
  };
  
  // 应用配置
  chart.setOption(option);
  
  // 响应窗口大小变化
  window.addEventListener('resize', () => {
    chart && chart.resize();
  });
};

// 更新图表数据
const updateChart = () => {
  if (!chart) return;
  
  const option = {
    xAxis: {
      data: props.data.map(item => {
        return item.name.replace('unsatisified_num=', 'un=');
      })
    },
    series: [
      {
        data: props.data.map(item => item.value)
      }
    ]
  };
  
  chart.setOption(option);
};

// 监听数据变化
watch(() => props.data, () => {
  if (chart) {
    updateChart();
  } else {
    initChart();
  }
}, { deep: true });

// 组件挂载时初始化图表
onMounted(() => {
  initChart();
});
</script>

<style scoped>
.chart-container {
  width: 100%;
  height: 180px;
}
</style> 